<template>
  <div>
    <div class="main_header">
      <i
        class="sidebar-btn"
        :class="$store.getters['getCollapse'] ? 'el-icon-s-unfold' : 'el-icon-s-fold'"
        @click="$store.commit('setCollapse', !$store.state.isCollapse)"
      />
      <span class="main_header_title">{{userRole}} : {{$store.state.user.username}}</span>
      <el-dropdown
        class="main_header_dropdown"
        @command="handleCommand"
      >
        <el-avatar
          :size="40"
          :src="circleUrl"
        />
        <!-- 使用canvas生成一个名字首字的头像 -->
        <canvas id="avatarCanvas" style="display:none"></canvas>
        <el-dropdown-menu slot="dropdown">
          <!-- <el-dropdown-item command="changePwd">修改密码</el-dropdown-item> -->
          <el-dropdown-item command="logOut">退出登录</el-dropdown-item>
        </el-dropdown-menu>
      </el-dropdown>
    </div>
    <div class="main_sidebar">
      <el-menu
        class="el-menu-vertical"
        background-color="#252932"
        active-text-color="#FFD04B"
        text-color="#FFFFFF"
        :collapse="$store.getters['getCollapse']"
        :default-active="$route.path"
        @select="select"
        router
      >
        <el-menu-item v-if="userRole === '普通用户'" index="/">
          <i class="el-icon-s-home"/>
          <span slot="title">首页</span>
        </el-menu-item>
        <el-menu-item v-if="userRole === '普通用户'" index="/report/">
          <i class="el-icon-edit-outline"/>
          <span slot="title">健康信息报备</span>
        </el-menu-item>
        <el-menu-item v-if="userRole === '检测机构管理员'" index="/hospital/">
          <i class="el-icon-office-building"/>
          <span slot="title">检测机构管理</span>
        </el-menu-item>
        <el-menu-item v-if="userRole === '系统管理员'" index="/admin/">
          <i class="el-icon-setting"/>
          <span slot="title">系统管理</span>
        </el-menu-item>
      </el-menu>
      <div
        :class="{ mask: !$store.getters['getCollapse'] }"
        @click="$store.commit('setCollapse', true)"
      />
    </div>
    <div class="main_box">
      <router-view/>
    </div>
  </div>
</template>

<script>
import { Message } from "element-ui";
export default {
  data() {
    return {
      circleUrl:  'https://cube.elemecdn.com/3/7c/3ea6beec64369c2642b92c6726f1epng.png',
      userRole: ""
    }
  },
  computed: {
  },
  created() {
    const tmp = this.$store.getters['user/getUserRole'];
    if (tmp === "USER") {
      this.userRole = "普通用户";
    } else if (tmp === "ORGAN_ADMIN") {
      this.userRole = "检测机构管理员";
    } else if (tmp === "SYSTEM_ADMIN") {
      this.userRole = "系统管理员";
    } else {
      this.$store.dispatch("user/logout");
      this.$router.push('/login');
    }
  },
  methods: {
    select() {
      this.$store.commit('setCollapse', true);
    },
    handleCommand(command) {
      if (command === 'changePwd') {
        Message.error("还未实现");
      }
      else if (command === 'logOut') {
        this.$store.dispatch("user/logout");
        this.$router.push('/login');
      }
    },
    /**
     * usernmae : 用户名 默认为无
     * size ：头像大小 默认为 30
     * color ：字体颜色
     * canvasId ：canvas容器的id
    * */
    generatorAvator: function(username,size,bgcolor,canvasId){
        //设置头像昵称，如果为null或者为空时，设置为无
        var nickname = username==null?"无":username==""?"无":username;
        //设置头像大小
        var avatarSize = size==null?30:size;

        //设置头像内部文字大小
        var fontSize = size==null?12:avatarSize/2;

        //设置头像内部字体
        var fontWeight = 'normal';

        //设置头像背景颜色
        var colors = [
            "#31bc9f", "#33cc70", "#4a94db", "#9b5fb6", "#34495e", "#16a085", "#27ae60", "#2980b9", "#8e44ad", "#2c3e50",
            "#f1cb1e", "#e6761b", "#e7363b", "#00bcd4", "#95a5a6", "#f39c12", "#d35400", "#c0392b", "#bdc3c7", "#7f8c8d"
        ];
        var avatarColor = bgcolor==null?colors[Math.floor((Math.random()*colors.length))]:bgcolor==""?bgcolor:colors[Math.floor((Math.random()*colors.length))];

        /*根据id获取canvas
        * 如果为空，则创建新的canvas
        * */
        var canvas = document.getElementById(canvasId);

        if(canvas){
            canvas.remove();
        }else{
            var newcanvas = "<canvas id='"+canvasId+"' style='display:none'></canvas>";
            document.getElementsByName("body").append(newcanvas);
            canvas = document.getElementById(canvasId);
        }

        // 初始化canvas设置
        canvas.width = avatarSize;
        canvas.height = avatarSize;
        var context = canvas.getContext('2d');

        //头像背景颜色设置
        context.fillStyle = avatarColor;
        context.fillRect(0, 0, canvas.width, canvas.height);

        //头像字体颜色设置
        context.fillStyle = '#FFFFFF';
        context.font = fontWeight + ' ' + fontSize + 'px sans-serif';
        context.textAlign = 'center';
        context.textBaseline="middle";

        context.fillText(nickname.charAt(0), fontSize, fontSize);
        return canvas.toDataURL("image/png");
    }
  },
  mounted() {
    this.circleUrl = this.generatorAvator(this.$store.state.user.username,60,null,"avatarCanvas");
  }
}
</script>

<style lang="scss">
body {
  margin: 0 0 0 0;
}

.mask {
  background-color: rgba(0, 0, 0, 0.3);
  position: fixed;
  top: 60px;
  left: 0;
  height: calc(100% - 60px);
  width: 100%;
  z-index: 100;
}

.main_header {
  background-color: #080808;
  position: fixed;
  z-index: 1895;
  height: 60px;
  width: 100%;

  .sidebar-btn {
    color: #777777;
    font-size: 30px;
    margin: 15px 0px 15px 10px;
  }

  .main_header_title {
    color: #FFFFFF;
    font-size: 24px;
    line-height: 60px;
    margin: 0px 20px 0px 20px;
  }

  .main_header_dropdown {
    float: right;
    margin: 10px 20px 10px 0px;
  }
}

.main_box {
  position: fixed;
  top: 60px;
  left: 64px;
  height: calc(100% - 60px);
  width: calc(100% - 64px);
}

</style>

<style lang="scss" scoped>
.el-menu-vertical {
  position: fixed;
  top: 60px;
  left: 0;
  height: calc(100% - 60px);
  z-index: 1000;
  overflow: hidden;
}

.el-menu-vertical:not(.el-menu--collapse) {
  width: 260px;
}

.el-menu {
  border-right: 0px;
}

.el-menu-item {
  font-size: 16px;
  text-align: left;
}

</style>
